<template>
	<view class="course-study">
		<view class="top-background">

		</view>

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
<!-- 					<uni-icons style="margin-right: 40rpx;" @click="toCollect" type="redo" size="30" color="#ffffff">
					</uni-icons> -->
					<uni-icons style="margin-right: 40rpx;" @click="toShareCourse" type="more-filled" size="30" color="#ffffff">
					</uni-icons>
				</view>
			</view>

			<view class="course-info">
				<img :src="courseInfo.cover"></img>
			</view>

			<view class="course-status">
				<view class="item">
					<view class="item-top">
						{{courseInfo.userCount}}
					</view>
					<view class="item-bottom">
						已学人数
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						{{courseInfo.progress}} %
					</view>
					<view class="item-bottom">
						学习进度
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						{{courseInfo.chapterCount}}章/{{courseInfo.sectionCount}}节
					</view>
					<view class="item-bottom">
						{{courseStatuses[courseInfo.status]}}
					</view>
				</view>
			</view>

			<view class="content">

				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)">
						<view :class="index==TabCur?'tab-text-on':'tab-text'">{{item}}</view>
						<view v-if="index==TabCur" class="tab-line"></view>
					</view>
				</view>
				<!-- 介绍界面 -->
				<view v-if="TabCur === 0" class="tab-card">
					<view class="notice" v-for="(noticeItem,index) in noticeList" :key="noticeItem.id">
						<view class="title">{{noticeItem.title}}</view>
						<view class="text">
							<view v-html="noticeItem.content" style="line-height: 50rpx;"></view>
						</view>
						<view class="date">于 {{noticeItem.gmtModified | gmtToDate}}</view>
					</view>
				</view>
				<!-- 目录界面 -->
				<view v-if="TabCur === 1" class="catalogs">
					<view v-for="(catalog,index) in chapters" :key="catalog.id">
						<view class="catalog" @click="handleIsShowIndex(index)">
							<view> {{catalog.name}} </view>
							<view>
								<uni-icons type="bottom" size="20" color="#ADAAAA" v-if="!isShowIndex[index]">
								</uni-icons>
								<uni-icons type="top" size="20" color="#ADAAAA" v-if="isShowIndex[index]">
								</uni-icons>
							</view>
						</view>
						<view v-if="isShowIndex[index]" class="sections">
							<view v-for="(section,index) in catalog.sections" @click="gotoSectionStudy(section.id)">
								<view class="section">
									<view style="width: 84%;">{{section.name}}</view>
									<view style="width: 16%;text-align: right;color: #5DACB1;">{{section.progress ? section.progress : 0}}%</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 笔记界面 -->
				<view v-if="TabCur === 2" class="comments bg-white">
					<view class="comment" v-for="(comment,commentIndex) in commentList">
						<view class="comment-top">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view class="avatar">
									<img :src="comment.userInfo.avatar"></img>
								</view>
								<view class="nickname">{{comment.userInfo.nickname}}</view>
							</view>
						</view>

						<view>{{comment.content}}</view>



						<view class="pictures">
							<view v-for="picture in comment.pictures" class="picture">
								<img :src="picture" @tap="ViewImage(picture,comment.pictures)" />
							</view>
						</view>

						<view v-if="comment.reply && comment.reply != ''"
							style="padding: 30rpx;background-color: #ececec;margin: 20rpx 0;border-radius: 10rpx;"
							v-html="comment.reply">
						</view>

						<view class="comment-bottom">

							<view class="date">于{{comment.gmtCreate | gmtToDate}}</view>

							<view style="display: flex;flex-direction: row;align-items: center;">
								
								
								<uni-icons v-if="comment.visibility==0" @tap="changeVisibility(comment,commentIndex)"
									style="margin-right: 30rpx;" type="eye-slash" size="28" color="#9d9d9d">
								</uni-icons>
								<uni-icons v-if="comment.visibility==1" @tap="changeVisibility(comment,commentIndex)"
									style="margin-right: 30rpx;" type="eye" size="28" color="#9d9d9d">
								</uni-icons>
								<uni-icons v-if="comment.visibility==2" @tap="changeVisibility(comment,commentIndex)"
									style="margin-right: 30rpx;" type="eye-filled" size="28" color="#9d9d9d">
								</uni-icons>

								<uni-icons style="margin-right: 30rpx;" v-if="comment.reply != null" type="chatboxes"
									size="28" color="#9d9d9d"></uni-icons>
								<uni-icons type="trash" size="25" color="#9d9d9d"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<!-- 历史界面 -->
				<view v-if="TabCur === 3" class="evaluate bg-white">
					<view style="margin: 50rpx 40rpx 30rpx 40rpx;">
						<userInfoCard :userInfo="courseInfo.userInfo"></userInfoCard>
					</view>
				</view>
			</view>

		</view>
		
		
		<uni-popup ref="shareOptions" type="bottom">
			<view class="popup">
				<view class="top">
					<view class="title">分享知桨</view>
					<view class="close">
						<!-- <image mode="aspectFill" :src="option.cover"></image> -->
					</view>
				</view>
				<view class="options">
					<view class="option-list" style="overflow: scroll;">
						<view v-for="option in options_share" @click="courseShare(index)">
							<view class="option">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
					<view class="option-list">
						<view v-for="(option,index) in options_edit" @click="courseEdit(index)">
							<view class="option"
								v-if="index > 1 || index==0 && !courseInfo.isFixed || index==1 && courseInfo.isFixed">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="moneyInput" type="bottom">
			<view class="modal-box">
				<view class="modal-title">赞赏提示</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">赞赏任意金额</text>
						<input type="digit" v-model="order.money" placeholder="请输入您想赞赏的金额" />
					</view>
				</view>
		
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>
		

		<view class="footer">
			<view class="footer-item">
				<view class="text" style="font-size: 32rpx;display: flex;flex-direction: row;">
					上次：<view class="text-title" style="color: gray;font-weight: normal;">{{courseInfo.lastSectionName}}</view>
				</view>
				<view class="footer-button" @click="gotoSectionStudy(courseInfo.lastSectionId)">
					继续学习
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				courseId: 0,
				courseStatuses:["更新中","已完结"],
				courseInfo: {
					userInfo: {
						avatar: "https://hula-hbc.oss-cn-shanghai.aliyuncs.com/20221230/肖申克的救赎 (2).png"
					}
				},
				chapters: [],
				noticeList: [],
				contentType: ["视频", "文档", "讨论"],
				exams: [{
					chapterName: "第一章",
					tests: [{
						name: "单元测试一",
					}]
				}],




				TabCur: 0,
				scrollLeft: 0,
				tabList: ['公告', '目录', '笔记', '历史'],
				isShowIndex: [true, true, true],
				isShowTopOperate: false,

				nowDate: new Date(),

				commentList: [],
				commentPage: {
					pageNow: 1,
					pageSize: 20,
					total: 0
				},
				
				
				order: {},
				
				options_share: [{
					text: "生成长图",
					cover: "https://www.cdn.kxcdedu.top/image/default/898191511DDA4A31A670DCD340C90B1D-6-2.png"
				}, {
					text: "微信好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/FF9B3803D26D4832BBB5CF07B7555961-6-2.png"
				}, {
					text: "朋友圈",
					cover: "https://www.cdn.kxcdedu.top/image/default/C43AB7C5243F440989F25AB10F7465A5-6-2.png"
				}, {
					text: "qq好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/ABB37A391BEB433FB3107B5F959B24CC-6-2.png"
				}, {
					text: "复制链接",
					cover: "https://www.cdn.kxcdedu.top/image/default/9E914679EB8B40479B43166F249A947D-6-2.png"
				}],
				
				options_edit: [{
					text: "设为常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/CA285DEBC1A84F47BCAEA6079C7BB463-6-2.png"
				}, {
					text: "取消常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/F5EC5A1B5A924671AE6A5E6FCDB59151-6-2.png"
				}, {
					text: "退出知桨",
					cover: "https://www.cdn.kxcdedu.top/image/default/C8CE49E69B8144BA8588D2DFC2668302-6-2.png"
				}, {
					text: "赞助知桨",
					cover: "https://www.cdn.kxcdedu.top/image/default/B584D91E8C7D45D3A293200F8D00FD5C-6-2.png"
				}],


				paddingTop:null

			}
		},
		onLoad(options) {
			var courseId = options.courseId
			this.courseId = options.courseId

			this.getCourseInfo(courseId)
			this.getDetailCourseDirs(courseId)
			this.listNotice(courseId)
			this.pageMineCourseComment(this.courseId);


			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		onShow() {
			this.getCourseInfo(this.courseId)
			this.getDetailCourseDirs(this.courseId)
			this.listNotice(this.courseId)
			this.pageMineCourseComment(this.courseId);
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		},
		methods: {
			getCourseInfo(courseId) {
				var that = this
				this.$api.getCourseInfo({
					courseId: courseId
				}).then(res => {
					console.log("课程信息", res)
					that.courseInfo = res.data;
				})
			},



			//获取公告
			listNotice(courseId) {
				var that = this
				this.$api.listNotice({
					courseId: courseId
				}).then(res => {
					console.log("公告", res)
					that.noticeList = res.data;
				})
			},
			// 获取带学习进度的目录
			getDetailCourseDirs(courseId) {
				var that = this
				this.$api.getDetailCourseDirs({
					courseId: courseId
				}).then(res => {
					console.log("目录", res)
					that.chapters = res.data;
				})
			},

			// 获取章节测试
			getTest(courseId) {
				this.$api.queryCourseExams({
					courseId
				}).then((res) => {
					console.log("测试", res)
					this.exams = res.data;
				});
			},
			// 获取笔记
			pageMineCourseComment(courseId) {
				this.$api.pageMineCourseComment({
					courseId,
					pageNow: this.commentPage.pageNow,
					pageSize: this.commentPage.pageSize
				}).then((res) => {
					this.commentList = res.data.rows;
					this.commentPage.total = res.data.total
				});
			},
			
			changeVisibility(comment, commentIndex) {
				let visibility = comment.visibility - 1
				if (visibility >= 3) {
					visibility = 0
				}
				if (visibility <= -1) {
					visibility = 2
				}
				this.$api.manageUpdateCourseComment({
					id: comment.id,
					visibility: visibility
				}).then(res => {
					this.commentList[commentIndex].visibility = visibility
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
				})
			},
			
			
			courseShare(){
				uni.showToast({
					icon:"none",
					title: "开发ing"
				})
			},
			
			courseEdit(optionIndex) {
				this.$refs.shareOptions.close("bottom")
				switch (optionIndex) {
					case 0:
						this.$api.fixCourseOrCancel({
							courseId: this.courseInfo.id
						}).then(() => {
							this.courseInfo.isFixed = true
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 1:
						this.$api.fixCourseOrCancel({
							courseId: this.courseInfo.id
						}).then(() => {
							this.courseInfo.isFixed = false
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 2:
						uni.showToast({
							icon: 'none',
							title: "功能还未开发嘿嘿",
						})
						break;
					case 3:
						this.$refs.moneyInput.open("bottom")
						break;
				}
			},
			
			toShareCourse() {
				this.$refs.shareOptions.open('bottom')
			},
			
			toEncourage() {
				this.$refs.moneyInput.open("bottom")
			},
			
			modalConfirm() {
				if (this.order.money == null || this.order.money == 0) {
					uni.showModal({
						title: "提示",
						content: "输入金额不能为零或者为空"
					})
					return
				}
				this.order.productId = this.courseInfo.id
				this.order.productType = 3
			
				// #ifdef H5
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_MWEB"
				}).then(res => {
					console.log(res.data.data.mwebUrl)
					window.location.href = res.data.data.mwebUrl
				})
				// #endif
			
				// #ifdef APP
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_APP"
				}).then(res => {
					console.log(res.data.data)
					let orderInfo = {
						"appid": res.data.data.appId, // 应用ID（AppID）
						"partnerid": "1608185528", // 商户号（PartnerID）
						"prepayid": res.data.data.prepayId, // 预支付交易会话ID
						"package": res.data.data.package, // 固定值
						"noncestr": res.data.data.nonceStr, // 随机字符串
						"timestamp": res.data.data.timeStamp, // 时间戳（单位：秒）
						"sign": res.data.data.paySign, // 签名，这里用的 MD5 签名
					}
			
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				// #endif
			
				// #ifdef MP-WEIXIN
				this.order.payType = "WXPAY_MINI"
			
				this.$api.purchaseOrder(this.order).then(res => {
					let orderInfo = {
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						sign: res.data.paySign, // 签名，这里用的 MD5 签名
					}
			
					uni.requestPayment({
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: "MD5",
						paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						success(res) {
							uni.showToast({
								title: '感谢',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
			
			
				// #endif
			
			
			
			
			
				this.$refs.moneyInput.close("bottom")
			},
			modalCancel() {
				this.$refs.moneyInput.close("bottom")
			},
			
			

			toBackPage() {
				uni.navigateBack()
			},

			ViewImage(picture, pictures) {
				uni.previewImage({
					urls: pictures,
					current: picture
				});
			},


			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			gotoSectionStudy(sectionId) {
				uni.navigateTo({
					url: '/pages_being/course/section-study?sectionId=' + sectionId
				})
			},

			gotoTest(examId) {
				// 开始测试并生成记录
				this.$api.createExamRecord({
					examId
				}).then(res => {
					uni.navigateTo({
						url: './test-detail/TestDetailView?recordId=' + res.data.data
					})
				})
			},
			gotoTestRecord(examRecordId) {
				uni.navigateTo({
					url: './detail/TestDetailView?recordId=' + examRecordId
				})
			},

			goEvaluateCourse() {
				uni.navigateTo({
					url: '../evaluate-course/EvaluateCourse'
				})
			},
			goDiscussDetail(id) {
				uni.navigateTo({
					url: './detail/DiscussDetail?discussId=' + id
				})
			},



			tabSelect(index) {
				this.TabCur = index
			},
			handleIsShowIndex(index) {
				this.isShowIndex[index] = !this.isShowIndex[index]
				this.$forceUpdate()
			},

			onShareAppMessage: function(e) {
				return {
					title: "职研社",
					path: '/pages_course/course-study/CourseStudy?courseId=' + this.courseInfo.id
				}
			}

		},
		onNavigationBarButtonTap(e) {
			this.isShowTopOperate = !this.isShowTopOperate

		}
	}
</script>

<style scoped lang="scss">
	
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
	
	.top-background {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 950rpx;
		background: linear-gradient(#1E5D72, #5DACB1, #B3DFDE);

	}

	.info {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;



		.back-arrow {
			width: 100%;
			//#ifdef MP-WEIXIN
			width: 550rpx;
			//#endif

			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif

			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}


		.course-info {
			width: 670rpx;
			height: 400rpx;
			margin-left: 40rpx;
			margin-top: 20rpx;

			border-radius: 20rpx;
			overflow: hidden;

		}

		.course-status {
			width: 700rpx;
			margin-left: 20rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 200rpx;
				height: 100rpx;

				.item-top {
					font-size: 36rpx;
					color: white;
				}

				.item-bottom {
					font-size: 28rpx;
					color: #dcdcdc;
				}
			}

			.split-line {
				width: 5rpx;
				height: 60rpx;
				background-color: #ffffff;
			}

		}


		.content {
			width: 100%;
			background-color: white;
			margin-top: 40rpx;
			border-radius: 30rpx;

			.creators {
				width: 670rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;

				.main-creator {

					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 40rpx;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 380rpx;
						height: 90rpx;

						.name {
							font-size: 36rpx;
						}

						.summary {
							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/*连续的空白符会被合并,但文本内的换行无效*/
							white-space: nowrap;
						}

					}

					.button {
						width: 140rpx;
						height: 60rpx;
						background-color: #5DACB1;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						color: white;
						border-radius: 20rpx;
					}

				}

				.other-creator {
					display: flex;
					flex-direction: row;
				}


			}


			.tabs {
				margin-left: 40rpx;
				margin-top: 50rpx;
				width: 670rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.tab {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 70rpx;

					.tab-text {
						font-size: 36rpx;
						color: gray;
					}

					.tab-text-on {
						font-size: 36rpx;
						font-weight: bold;
						color: #1E5D72
					}

					.tab-line {
						margin-top: 10rpx;
						width: 60rpx;
						height: 7rpx;
						border-radius: 50rpx;
						background-color: #1E5D72;
					}
				}


			}

			.tab-card {
				margin-bottom: 160rpx;
				min-height: 1200rpx;

				.overview {
					padding: 40rpx;
				}
			}

			.notice {
				width: 670rpx;
				margin-left: 40rpx;
				padding: 40rpx 0;

				.title {
					font-size: 40rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.date {
					color: #00000059;
					font-size: 28rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}
			}

			.catalogs {
				display: flex;
				flex-direction: column;
				width: 670rpx;
				margin-left: 40rpx;
				padding: 10rpx 0 40rpx 0;
				margin-bottom: 160rpx;

				margin-left: 20px;
				border-radius: 20rpx;

				.catalog {
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					margin-bottom: 40rpx;
					justify-content: space-between;

				}

				.sections {


					.section {
						margin-left: 20rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}

				}
			}


			.comments {

				display: flex;
				flex-direction: column;
				min-height: 1000rpx;
				width: 670rpx;

				margin-top: 20rpx;
				margin-bottom: 160rpx;

				margin-left: 20px;


				.comment {
					width: 670rpx;
					margin-bottom: 40rpx;
					border-radius: 20rpx;

					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
						}


						.nickname {
							margin-left: 20rpx;
						}
					}

					.comment-bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.date {
							font-size: 28rpx;
							color: gray;
						}
					}

					.pictures {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin: 10rpx 0;

						width: 100%;
						flex-wrap: wrap;

						.picture {
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}

				}
			}
		}

	}
	
	
	.popup {
		padding: 40rpx 30rpx 60rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		min-height: 200rpx;
	
		.top {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
	
			.title {
				font-weight: bold;
			}
	
			.close {}
		}
	
		.options {
			display: flex;
			flex-direction: column;
			margin-top: 10rpx;
	
			.option-list {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
	
				.option {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-right: 30rpx;
	
					.img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
	
					.text {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
	
	
			}
	
	
	
	
		}
	}
	
	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 600rpx;
	
	
		padding: 40rpx;
		border-radius: 20rpx;
		background: white;
	
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		text-align: left;
	
	
		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	
		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;
	
	
			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;
	
				.modal-key {
					display: block;
	
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
	
			}
	
			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;
	
				line-height: 60rpx;
			}
	
		}
	
		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;
	
			text-align: center;
		}
	
		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;
	
			width: 40%;
		}
	
	}

	.footer {
		position: fixed;
		background-color: #ffffff;
		height: 130rpx;
		width: 100%;
		bottom: 0;
		z-index: 3;
		border-top: solid thin #e7e7e7;

		display: flex;
		flex-direction: row;
		align-items: center;

		.footer-item {
			width: 650rpx;
			margin-left: 50rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 46rpx;
				font-weight: bold;
				
				
				.text-title{
					width: 300rpx;
					/*超过范围进行隐藏不显示*/
					overflow: hidden;
					/*文本溢出, 使用省略号 */
					text-overflow: ellipsis;
					/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
					display: -webkit-box;
					/*限制块容器显示的文本行数, 按照你的需求设置*/
					-webkit-line-clamp: 1;
					/*盒子的方向, 垂直、水平等*/
					-webkit-box-orient: vertical;
					/*文字换行, 可以在单词内断*/
					word-wrap: break-word;
				}
				
				

			}

			.footer-button {
				padding: 0 50rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #5DACB1;
				border-radius: 50rpx;
				color: white;
			}
		}
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
